<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <el-tabs>
          <el-tab-pane label="组织架构" style="padding: 30px 40px">
            <!-- 此处放插槽内容 -->
            <el-row type="flex" justify="space-between" align="middle" style="height: 40px; border-bottom: 1px solid #ccc; margin-bottom: 5px">
              <el-col style="font-weight: 700; font-size: 16px">
                <i class="el-icon-office-building" />
                <span>{{ companyName }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>负责人</el-col>
                  <el-col>
                    <!-- 下拉菜单 element -->
                    <el-dropdown @command="handleCommand">
                      <span>
                        操作
                        <i class="el-icon-arrow-down" />
                      </span>
                      <!-- 下拉菜单 -->
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="{ type: 'add', id: '' }">添加子部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-tree :data="depts" :props="defaultProps" default-expand-all>
              <template v-slot="{ node, data }">
                <el-row type="flex" justify="space-between" align="middle" style="width: 100%; height: 40px">
                  <el-col>
                    <span>
                      <span v-if="data.children">
                        <i v-if="!node.expanded" class="el-icon-circle-plus-outline" />
                        <i v-else class="el-icon-remove-outline" />
                      </span>
                      <svg-icon v-else icon-class="user" />
                      {{ data.name }}
                    </span>
                  </el-col>
                  <el-col :span="4">
                    <el-row type="flex" justify="end">
                      <!-- 两个内容 -->
                      <el-col>{{ data.manager }}</el-col>
                      <el-col>
                        <!-- 下拉菜单 element -->
                        <el-dropdown @command="handleCommand">
                          <span>
                            操作
                            <i class="el-icon-arrow-down" />
                          </span>
                          <!-- 下拉菜单 -->
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="{ type: 'add', id: data.id }">添加子部门</el-dropdown-item>
                            <el-dropdown-item :command="{ type: 'edit', id: data.id }">查看部门</el-dropdown-item>
                            <el-dropdown-item :command="{ type: 'del', id: data.id }">删除部门</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </template>
            </el-tree>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <!-- 添加子部门的组件 -->
    <add-dep ref="addDepRef" @get-new-deps="getDepartments" />
    <!-- 编辑部门的组件 -->
    <!-- <edit-dep :dialog-visible="editDialogVisible" @update:dialogVisible="changeDialogVisibleHandle" /> -->
    <!-- sync语法糖 -->
    <edit-dep :dep="dep" :dialog-visible.sync="editDialogVisible" @get-new-deps="getDepartments" />
  </div>
</template>

<script>
import { getDepartments, delDepartment, getDepartmentDetail } from '@/api/departments'
// 导入无限极分类的工具函数
import { tranListToTreeData } from '@/utils'
import AddDep from './components/add-dep.vue'
import EditDep from './components/edit-dep.vue'
export default {
  components: {
    AddDep,
    EditDep
  },
  data() {
    return {
      loading: false, // 控制加载数据进度条的显示和隐藏
      // 部门数据
      depts: [],
      // 公司名称
      companyName: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 控制编辑对话框的显示和隐藏
      editDialogVisible: false,
      // 待编辑的部门数据
      dep: {}
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    // 子组件修改父组件的props
    changeDialogVisibleHandle(status) {
      this.editDialogVisible = status
    },
    // 获取部门列表数据
    async getDepartments() {
      this.loading = true
      const res = await getDepartments()
      this.loading = false
      this.companyName = res.companyName
      // 使用无限极分类的方法处理列表数据为树形数据
      this.depts = tranListToTreeData(res.depts, '')
    },
    // 处理下拉菜单事件
    async handleCommand({ type, id }) {
      if (type === 'add') {
        // 添加子部门
        // 获取子组件对象并调用子组件中的方法
        this.$refs.addDepRef.open(id)
      } else if (type === 'edit') {
        // 编辑部门
        this.dep = await getDepartmentDetail(id)
        // 让修改的对话框显示
        this.editDialogVisible = true
      } else if (type === 'del') {
        // 删除部门
        try {
          await this.$confirm('您确定要删除该部门数据吗')
          // 删除
          await delDepartment(id)
          this.$message.success('删除成功')
          this.getDepartments()
        } catch {
          console.log('取消删除')
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 60px;
  font-size: 14px;
  .el-icon-office-building {
    font-weight: 700;
    font-size: 16px;
    margin-right: 5px;
  }
  ::v-deep {
    .el-tree-node__content {
      height: 40px;
    }
    .el-tree-node__expand-icon {
      color: #fff;
    }
  }
}
</style>
